<template>
  <div class="map-position">
    <div class="map-position-number" :class="mapPositionNumber">{{ position.number }}</div>
    <div class="map-position-content">{{ position.name }}</div>
    <div class="map-position-local" :class="mapPositionLocalClass"></div>
  </div>
</template>

<script>
export default {
  name: 'Map',

  props: {
    position: Object,
    currentPosition: Number,
    positionMax: Number,
    eventLastComplete: Boolean,
    updateFlag: Number,
  },

  data() {
    return {
      isCurrentPosition: false,
      isCompletePosition: false
    }
  },

  computed: {
    mapPositionNumber() {
      return {
        'map-position-number-unfinish': !this.isCompletePosition
      }
    },
    mapPositionLocalClass() {
      return {
        'map-position-local-active': this.isCurrentPosition && this.isCompletePosition,
        'map-position-local-unfinish-active': this.isCurrentPosition && !this.isCompletePosition
      }
    }
  },

  watch: {
    updateFlag() {
      updateState(this)
    }
  },

  mounted() {
    updateState(this)
  },
}

let updateState = (that) => {
  if (that.currentPosition === that.position.number) {
    that.isCurrentPosition = true
  }
  else {
    that.isCurrentPosition = false
  }

  if (that.position.number !== that.positionMax || that.eventLastComplete === true) {
    that.isCompletePosition = true
  }
  else {
    that.isCompletePosition = false
  }
}
</script>

<style lang="scss">

</style>
